<template>
	<view class="RoBotView" :style="{background:  `#4f9e7e url(${imageBaseUrl}/20250403172156.gif) no-repeat center / 750rpx 100vh`}">
		<view class="FixedCenter">
			<view class="FixedCenterTop">
				<view class="DialogueWelComeTitle">
					<view class="DialogueWelComeTitleOne">你好，我是小智能办事助手</view>
					<view class="DialogueWelComeTitleTwo">很高兴为您服务，请问有什么可以帮您~</view>
				</view>
				<view class="DialogueWelComeImg">
					<image :src="`${imageBaseUrl}/homeimg.png`" alt=""></image>
				</view>
			</view>
			<view class="FixedCenterLi" v-for="(item, index) in speakList" :key="index">
				<view class="DialogueAskAnswer DialogueAskContainer DialogueMargin">
					<view class="DialogueAsk">{{ item.speakText }}</view>
				</view>
				<view class="DialogueAskAnswer DialogueMargin">
					<view class="DialogueAnswer">
						<view class="DialogueAnswerGaoKao">
							<view class="DialogueAnswerGongJiJins DialogueAnswerGaoKaos">
								<view v-if="item.SpeakValue !== '' && item.SpeakValue !== undefined">
									{{ item.displayedText }}
									<text v-if="item.isTyping" class="blinking-cursor">|</text>
								</view>
								<view v-else style="display: flex;align-items: center;">
									<image style="width: 32rpx;height: 32rpx;" src="@/static/images/loading.gif">
									</image>正在思考...
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="FixedEnd">
			<view class="DialogueBot">
				<view class="DialogueBotContainer">
					<!-- 切换语音/输入文字 -->
					<image v-if="!resultType" class="DialogueWenZi" src="@/static/images/wenzi.png" alt=""
						@click="changeResultType"></image>
					<image v-if="resultType" class="DialogueYuYin" src="@/static/images/weixinyuyin.png" alt="">
					</image>
					<!-- 按住说话 -->
					<label v-if="!resultType">按住 说话</label>
					<!-- 输入框 -->
					<input v-if="resultType" type="text" v-model="TextValue" :disabled="noType"
						:placeholder="noType ? '请您先耐心等待数字人回答' : '请输入您需要咨询的问题'">
					<!-- 发送 -->
					<image v-if="resultType" class="DialogueFaSong" src="@/static/images/fasong.png" alt=""
						@click="changeResultText"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRobotText,
		getRobotTextNew,
		getRobotTextNewLiu
	} from '@/api/api.js'
	export default {
		computed: {
			imageBaseUrl() {
				return this.$IMAGE_BASE_URL;
			}
		},
		data() {
			return {
				TextValue: '',
				SpeakValue: '',
				resultType: true,
				speakList: [],
				noType: false,
				typingSpeed: 10
			}
		},
		methods: {
			getSpeakText(entry) {
				getRobotTextNew(entry.speakText).then(res => {
					const {
						code,
						data
					} = res
					if (code === 0) {
						this.$set(entry, 'SpeakValue', data)
						this.$set(entry, 'fullText', data)
						this.$set(entry, 'displayedText', '')
						this.$set(entry, 'currentIndex', 0)
						this.$set(entry, 'isTyping', true)
						this.typeText(entry)
						this.noType = false
					}
				})
			},
			typeText(entry) {
				if (entry.currentIndex < entry.fullText.length) {
					this.$set(entry, 'displayedText', entry.fullText.substring(0, entry.currentIndex + 1))
					this.$set(entry, 'currentIndex', entry.currentIndex + 1)
					setTimeout(() => {
						this.typeText(entry)
					}, this.typingSpeed)
				} else {
					this.$set(entry, 'isTyping', false)
				}
			},
			changeResultText() {
				this.noType = true
				if (!this.TextValue.trim()) return
				const newEntry = {
					speakText: this.TextValue,
					SpeakValue: '',
					fullText: '',
					displayedText: '',
					currentIndex: 0,
					isTyping: false
				}
				this.speakList = [...this.speakList, newEntry]
				const targetEntry = this.speakList[this.speakList.length - 1]
				this.getSpeakText(targetEntry)
				this.TextValue = ''
			}
		}
	}
</script>

<style scoped>
	.RoBotView {
		height: 100vh;
	}

	.FixedCenter {
		position: fixed;
		bottom: 120rpx;
		left: 50%;
		margin-left: -350rpx;
		width: 700rpx;
		height: 700rpx;
		overflow-y: auto;
		border-radius: 10rpx;
		padding: 20rpx 55rpx;
		padding-top: 0;
		box-sizing: border-box;
		background: rgba(255, 255, 255, .7);
	}

	.FixedCenterTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 160rpx;
		padding: 20rpx 0;
		margin: 0 0 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx dashed #999999;
	}

	.DialogueWelComeTitle .DialogueWelComeTitleOne {
		display: block;
		font-size: 30rpx;
		color: #000000;
	}

	.DialogueWelComeTitle .DialogueWelComeTitleTwo {
		display: block;
		font-size: 26rpx;
		color: #333333;
		padding: 20rpx 0 0;
	}

	.DialogueWelComeImg image {
		width: 120rpx;
		height: 104rpx;
	}

	.FixedEnd {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #f1f1f1;
	}

	.DialogueBot {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.DialogueBotContainer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 27rpx;
		border-radius: 10rpx;
		background: #ffffff;
	}

	.DialogueBotContainer .DialogueWenZi {
		width: 48rpx;
		height: 48rpx;
	}

	.DialogueBotContainer .DialogueYuYin {
		width: 48rpx;
		height: 48rpx;
	}

	.DialogueBotContainer label {
		flex: 1;
		display: block;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 16rpx;
		color: #333333;
		text-align: center;
		margin: 0 15rpx;
	}

	.DialogueBotContainer input {
		flex: 1;
		/* display: block; */
		height: 98rpx;
		line-height: 98rpx;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
		margin: 0 15rpx;
		outline: none;
		border: none;
	}

	.DialogueBotContainer .DialogueFaSong {
		width: 48rpx;
		height: 48rpx;
	}

	.DialogueAnswer {
		display: inline-block;
		max-width: 545rpx;
		padding: 16rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333333;
		line-height: 46rpx;
		border-radius: 20rpx 20rpx 20rpx 0;
		background: #ffffff;
	}

	.DialogueAsk {
		display: inline-block;
		max-width: 520rpx;
		padding: 16rpx 30rpx;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 46rpx;
		box-sizing: border-box;
		text-align: left;
		border-radius: 20rpx 20rpx 0 20rpx;
		background: linear-gradient(to right, #44a9ff, #4581f4);
	}

	.DialogueAskContainer {
		text-align: right;
	}

	.DialogueMargin {
		margin: 0 0 25rpx;
	}

	.blinking-cursor {
		animation: blink 1s infinite;
		color: #333;
	}

	@keyframes blink {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}

	/* 保证文字容器高度 */
	.DialogueAnswerGaoKaos {
		min-height: 1.2em;
	}
</style>